<template>
  <div>
    <el-row>
      <el-col :span="4"
        ><el-button
          icon="iconfont icon-jiahao"
          type="warning"
          @click="$bus.$emit('createVisibleFn')"
          >新建</el-button
        ><el-button type="info" v-if="$route.name==='business'" @click="$bus.$emit('taskPlugins')"
          >工单配置</el-button
        ></el-col
      >
    </el-row>
    <el-table
      ref="singleTable"
      :data="searchTaskArray"
      highlight-current-row
      center
      style="width: 100%"
    >
      <el-table-column align="center" label="序号" type="index" width="80" height="45">
      </el-table-column>
      <el-table-column align="center" property="taskCode" label="工单编号" >
      </el-table-column>
      <el-table-column align="center" property="innerCode" label="设备编号" >
      </el-table-column>
      <el-table-column
        align="center"
        property="taskType.typeName"
        label="工单类型"
      ></el-table-column>
      <el-table-column align="center" label="工单方式" >
        <template v-slot="{ row: { createType } }">
          <!-- 获取的对象中属性,可变,应该使用对象属性的key.不可变直接 对象.属性 -->
          <div>{{ creatTypeNum[+createType] || '未知' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        property="taskStatusTypeEntity.statusName"
        label="工单状态"
      ></el-table-column>
      <el-table-column align="center" property="userName" label="运营人员" >
      </el-table-column>
      <el-table-column align="center" property="createTime" label="创建日期" >
      </el-table-column>
      <el-table-column align="center" label="操作" width="220" >
        <template slot-scope="{ row }">
          <el-button size="mini" @click="$bus.$emit('openOuterDialog', row)"
            >查看详情</el-button
          ></template
        >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    searchTaskArray: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      creatTypeNum: {
        1: '手动',
        0: '自动'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-col {
  margin-bottom: 20px;
}
/deep/.el-table th.el-table__cell {
  background-color: rgb(243, 246, 251);
}
/deep/tr.el-table__row {
  height: 45px !important;
}

/deep/.el-table td.el-table__cell {
  border: none;
  height: 0px;
  padding: 0;
  .el-button {
    height: 30px;
    line-height: 1px;
    margin: 10px 0 10px 10px;
    width: 80px;
    color: #5f84ff;
  }
}
/deep/.el-table th.el-table__cell.is-leaf {
  border: none;
}
/deep/.el-button--warning {
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  text-align: center;
  .icon-jiahao:before {
    content: '\e726';
    margin-right: 5px;
  }
}
/deep/.el-button--info {
  background-color: #fbf4f0 !important;
  border: none;
  color: #333;
}
/deep/.el-table::before {
  height: 0;
}
</style>
